<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VideoKit</title>
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="tailwind.min.css">
    </head>
    <body>
        <script src="./alpine.min.js"></script>
        <script src="./renderer.js"></script>
        <div class='container p-10 text-center'>

            <div class="py-5">
                <input id='file' multiple='true' type="file" name="file" value="" />
            </div>

            <input class='w-full' type="range" min="10" max="90" step="5" id='size' value='50' list="tickmarks">

            <datalist id="tickmarks" class='w-full flex justify-between'>
                <option value="10" label="10%"></option>
                <option value="20"></option>
                <option value="30"></option>
                <option value="40"></option>
                <option value="50" label="50%"></option>
                <option value="60"></option>
                <option value="70"></option>
                <option value="80"></option>
                <option value="90" label="90%"></option>
            </datalist>


            <div class='h-20'>
                <button onclick='submit(this)' class='text-lg rounded m-10 px-5 bg-yellow-300'>
                    开始压缩</button>

            </div>

            <div class="mt-5" id='info'>
            </div>
        </div>

    </body>
</html>
